<template>
  <div id="swiper">
    <swiper :options="swiperOption" v-if="swiperList.length">
        <!-- slides -->
        <swiper-slide v-for='item in swiperList' :key="item.id">
          <a :href="item.url"><img class="swiper-img" :src="item.imgUrl" alt=""></a>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
  </div>
</template>

<script>
export default {
  name: 'homeswiper',
  props: {
    swiperList: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true,
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 90,
          stretch: 0,
          depth: 200,
          modifier: 2,
          slideShadows: true
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  #swiper >>> .swiper-pagination-bullet-active/* 穿透scoped */
    background-color #fff
  #swiper
    width: 100%;
    height: 0;
    overflow hidden
    padding-bottom: 27%;
    .swiper-img
      width: 100%;
</style>
